<template>
  <div class="row justify-between">
    <div @click.stop="handleClick($event)" :id="option.value" class="view-mode"
         :class="{selected: parseInt(option.value) === parseInt(visiting)}" v-for="option in options"
         :key="option.value"> {{ option.option }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'Toggle',
  // 如果想使用此组件，则需要传递的数据
  props: {
    options: {
      type: Array,
      required: true
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 默认不显示下级目录
      visiting: 6
    }
  },
  computed: {},
  methods: {
    handleClick (e) {
      this.visiting = e.target.id
      this.$emit('mode', e.target.id)
    }
  }
}
</script>

<style lang="scss">

.view-mode {
  width: 50%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-bottom: 1px solid $c3;
}

.selected {
  background-color: $c3;
  color: white;
}
</style>
